import React, { useState, useEffect, useMemo } from 'react';
import { Switch, Checkbox, Balloon, Message } from '@teamix/ui';
import { ButtonIcon } from '@alife/devops-ui';
import exceed from 'utils/apimap';
import docs from 'utils/docs';
import './index.scss';

const projectId = window.FORCE.organization.id;

const Watermark = () => {
  const [switchValue, setSwitchValue] = useState(false);
  const [checkedValue, setcheckedValue] = useState(false);
  const [bizno, setBiznO] = useState('');
  const onChangeSwitch = (value) => {
    getWaterMark('post', { bizNo: bizno, openWaterMark: value, hideVisibleMark: checkedValue });
  };
  const onChangeCheckbox = (value) => {
    getWaterMark('post', { bizNo: bizno, openWaterMark: switchValue, hideVisibleMark: value });
  };
  const getWaterMark = async (flag, data) => {
    if (flag === 'get') {
      const getValue = await exceed.fetch({
        api: 'organization_setting_risk_watermark_get',
        params: { projectId },
      });
      const { bizNo, openWaterMark, hideVisibleMark } = getValue;
      setSwitchValue(openWaterMark);
      setcheckedValue(hideVisibleMark);
      setBiznO(bizNo);
    } else {
      const postValue = await exceed.fetch({
        api: 'organization_setting_risk_watermark_post',
        params: { projectId },
        data: { ...data },
      });
      const { bizNo, openWaterMark, hideVisibleMark } = postValue;
      setSwitchValue(openWaterMark);
      setcheckedValue(hideVisibleMark);
      setBiznO(bizNo);
      Message.success({ title: '水印设置成功' });
    }
  };
  useEffect(() => {
    getWaterMark('get');
  }, []);
  const tipContent = useMemo(() => {
    return (
      <section className="water_mark_pop">
        <div>水印包括明暗纹：</div>
        <div className="water_mark_ulitem">
          <ul>
            <li>暗纹水印为页面底纹，不可隐藏；</li>
            <li>明纹水印为当前访问者企业用户名，直观可读，支持隐藏；</li>
          </ul>
        </div>
        <div className="water_mark_example">
          <div className="water_mark_list">
            <div>暗纹水印示例</div>
            <img
              height="104px"
              src="https://img.alicdn.com/imgextra/i4/O1CN01Aq0ctD26vBWHjbxC5_!!6000000007723-2-tps-484-252.png"
            />
          </div>
          <div className="water_mark_list">
            <div>明纹水印示例</div>
            <img
              height="104px"
              src="https://img.alicdn.com/imgextra/i2/O1CN01GjHwtc1DULRZMHUKU_!!6000000000219-2-tps-484-252.png"
            />
          </div>
        </div>
      </section>
    );
  }, []);
  return (
    <div className="water_mark_scss">
      <div className="water_mark_title">启用安全水印</div>
      <section className="water_mark_conter">
        <div className="water_mark_desc">
          支持在源代码浏览页面添加访问者水印，提高代码页面展示的安全性，辅助溯源追责。
          <a href={docs('water_mark_link')} target="_blank" rel="noreferrer">
            了解更多
          </a>
        </div>
        <div className="water_mark_switch">
          <Switch onChange={onChangeSwitch} checked={switchValue} />
        </div>
      </section>
      {switchValue && (
        <div className="water_mark_checkout_img">
          <Checkbox checked={checkedValue} onChange={onChangeCheckbox}>
            隐藏明文水印
          </Checkbox>
          <Balloon
            type="primary"
            closable={false}
            align="t"
            // pure
            // footer={false}
            popupStyle={{
              maxWidth: 500,
              width: 500,
            }}
            trigger={<ButtonIcon name="question-line" style={{ position: 'relative', top: 2 }} />}
          >
            {tipContent}
          </Balloon>
        </div>
      )}
    </div>
  );
};

export default Watermark;
